<template>
  <div class="artist-list">
    <div class="artists" v-for="(item, index) in artists" :key="index">
      <img v-lazy="item.img1v1Url + '?param=200y200'" alt @click="handleDetail()"/>
      <span class="artists-name" @click="handleDetail">{{ item.name }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "artistList",
  props: {
    artists: {
      type: Array,
      default: () => [],
    },
    imgWith: {
        type: Number,
        default: 10,
    },
    imgHeight: {
        type: Number,
        default: 10
    }
  },
  computed: {
  },
  data() {
    return {};
  },
  methods: {
      handleDetail() {

      }
  }
};
</script>
<style lang="less" scoped>
.artist-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.artists {
  width: 11rem;
  height: 10.9rem;
  margin: 10px 10px 30px 10px;
  img {
    // width: calc(var(--imgHeight) * 1rem);
    height: 10.9rem;
    border-radius: 8%;
    cursor: pointer;
  }
  &-name {
    cursor: pointer;
    color: rgb(87, 84, 84);
  }
  &-name:hover {
    color: rgb(24, 22, 22);
  }
}
</style>
